<template>
  <el-dropdown>
    <el-button icon="el-icon-menu" plain circle></el-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="(item, index) in visualRoutes" :key="item.path" :divided="isGroup(item) && index > 0">
        <router-link :to="item.path" class="link" :style="{display: 'block'}">
          {{item.meta.title}}
        </router-link>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: 'visual-menu-button',
  computed: {
    permissionRoutes () {
      return this.$store.state.user.permissionRoutes
    },
    visualRoutes () {
      const routes = this.permissionRoutes
      const visualRoute = routes.filter(v => /visual-screen/.test(v.path))
      return visualRoute && visualRoute[0] && visualRoute[0].children
    },
  },
  methods: {
    isGroup (item) {
      // eslint-disable-next-line
      return item.superiorMenuId == 0
    },
  },
}
</script>
